<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!doctype html>
<%
	String path = request.getContextPath();
%>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="copyright" content=""/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
	<title>手机验证码登录</title>
    <link href="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
	<link href="${pageContext.request.contextPath}/css/system/public.css" />
	<link href="${pageContext.request.contextPath}/css/system/login.css" rel="stylesheet"/>
	<link href="${pageContext.request.contextPath}/css/system/alert.css" rel="stylesheet"/>
	<link href="../favicon.ico" rel="shortcut icon">
</head>
<body class="s_body s_phone_login k_body">
	<ul class="s_header">
        <li><img src="${pageContext.request.contextPath}/images/system/s_logo.png" /></li>
        <li><a href="http://cecook.cn/">首页</a></li>
        <li><a href="javascript:;">产品优势</a></li>
        <li><a href="javascript:;">成为代理商</a></li>
        <li><a href="javascript:;">联系我们</a></li>
        <li class="s_header_on"><a href="${pageContext.request.contextPath}/ui/loginPwd">登录</a></li>
        <li><a href="${pageContext.request.contextPath}/ui/registerOne">申请试用</a></li>
    </ul>
    <div class="s_content">
        <div class="s_login_box">
            <h3>登录</h3>
            <ul class="s_dl_list">
                <li>
                    <i class="s_phone"></i>
                    <div class="s_input_box">
                        <input type="text" placeholder="输入手机号" id="J-xphone" maxlength="11"/>
                        <span><img class="delICON" src="${pageContext.request.contextPath}/images/system/close.png" onclick="delICON(J-xphone)"/></span>
                    </div>
                </li>   
                <li  class="s_code " >                   
                    <div class="s_input_box" style="margin-left:10px;">           
                        <input type="text" placeholder="手机验证码" id="login_code" maxlength="6"/>   
                    </div>       
                </li>
                <input type="button" value="发送验证码" class="s_codes J_xcode" id="send_login_code">
            </ul>
            <a href="javascript:;" class="s_phone_login" onclick="toLogin()">账号密码登录</a>
            <em class="s_red_three"></em>
            <a href="javascript:;" class="s_dl_button" id="login_button">登 录</a>
            <p class="s_xx">
              <!--  <img src="../sys/register/images/s_check.png" class="s_check" _id="1" />
                <a href="javascript:;">10天内免登录</a>  -->
            </p> 
        </div>
    </div>
    <div class="s_footer">
        <p>zhfeat</p>
    </div>
    <div class="s_popup_delect2">
        <div class="s_consum">
            <p id="dialog_title"><img src="${pageContext.request.contextPath}/images/system/s_tick.png" /></p>
        </div>
    </div>
   	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script>
	    function daojishi(){
	    	var check_phone = checkPhone();
	    	if(!check_phone){
	    		return ;
	    	}
	        var $this = $('.J_xcode'),
	            _this = this,
	            i = 60;
	        //_this.disabled = 'disabled';
	        //$('#send_login_code').attr('disabled','false');
	        clearInterval(repeat);
	        var repeat = setInterval(function(){
	            i--;
	            if(i == 0){
	                //_this.disabled = false;
	                $('#send_login_code').removeAttr('disabled');
	                $this.removeClass('gray').val('获取验证码');
	                clearInterval(repeat);
	            }else{
	                $this.addClass('gray').val(i+'s后重新获取');
	                $('#send_login_code').attr('disabled','false');
	            }
	        },1000);
		}
        $(function(){  
        	
            $('.s_dl_list li input').focus(function(){
                $(this).parents('.s_dl_list li').addClass('focus');
                $(this).parents('li').find("i").addClass('s_on_img');
            });
            $('.s_dl_list li input').blur(function(){
                $(this).parents('.s_dl_list li').removeClass('focus');
                $(this).parents('li').find("i").removeClass('s_on_img');
                $(this).parents('li').find('span').hide();
            });
            $('.s_dl_list li input').on('keyup',function(){
                if($(this).val()==""){
                    return false;
                }else{
                    $(this).next().show()
                }
            });
            $('.s_xx').click(function(){
              var id = $(this).find('img').attr('_id');
                if(id == 1){
                  $('.s_check').attr('src', '${pageContext.request.contextPath}/images/system/s_check_no.png');
                  $(this).find('img').attr('_id' , '2');
                  ten_login = 2;
                }else{
                  $('.s_check').attr('src', '${pageContext.request.contextPath}/images/system/s_check.png');
                  $(this).find('img').attr('_id' , '1');
                  ten_login = 'yes';
                }
            });
            // 手机号判断
            if($('#J-xphone').length >= 1){
                var phone   = document.getElementById("J-xphone");
                phone.oninput = function(){
                    var oVal = this.value;
                    this.value = oVal.replace(/\D/g,'');
                    if(this.value.substring(0,1) != '1'){
                        this.value = this.value.substring(0,0);
                    }else{
                        this.value = this.value.substring(0,11);
                    };
                };
            };
            
            //发送验证码
            var code_id ;
            $('#send_login_code').click(function(){
            	wait(this);
            	$('.s_red_three').text("");
            	var check_phone = checkPhone();
            	if(check_phone){
	            	var account = $('#J-xphone').val();
	            	var url = "${pageContext.request.contextPath}/api/sms/verification_code/send";
	            	$.post(url,{
	            		"account":account,
	            		"code_type":"login_code"
	            		},
	            		function(data){
	            			if(data.error_code == "0"){
	            				//发送成功
	            				daojishi();
	            				send_times = true;
	            				code_id = data.tag;
	            			}
	            			if(data.error_code == "1"){
	            				//发送失败
	            				$('.s_red_three').text(data.message);
	            				send_times = false;
	            				if(data.message == "请稍后发送"){
	            					send_times = true;
	            				}
	            			}	
	            		},"json");
            	}
            });
            //十天
            var ten_login ;
            $(document).keyup(function(){
 				if (event.keyCode == "13") {
 					$('#login_button').click();
 	    		}
 			});
            //登陆
            $('#login_button').click(function(){
            	var result = checkAll();
            	if(!result){
            		return;
            	}
            	var url = "${pageContext.request.contextPath}/api/login/code";
            	var account = $('#J-xphone').val();
            	var login_code = $('#login_code').val();
            	$.post("${pageContext.request.contextPath}/api/sms/verification_code/verify",
            			{"account":account,
            			"ver_code":login_code,
            			"code_type":"login_code",
            			"code_id":code_id},
            	function(data){
            		//验证码校验成功
            		if("0"== data.error_code){
		            	$.post(url,{
		            		"account":account,
		            		"ver_code":login_code,
		            		"code_type":"login_code"
		            	},function(data){
		            		if("0" == data.error_code){
		            			window.location.href="${pageContext.request.contextPath}/api/clue_customer/customerHome";
		            		}else if("10010" == data.error_code || "10011" == data.error_code){
		            			var error = data.message;
		            			$('.s_red_three').text(error);
		            			$('#login_code').val("");
		            		}else if("2" == data.error_code){
		            			showDialog("您的账号尚未设置密码,且连续登陆5次,为了安全考虑，请先设置密码");
		            			window.location.href="${pageContext.request.contextPath}/ui/recoverPwd";
		            		}else if("3" ==  data.error_code){
		            			var json = '{type :"FristType",key :"name",value :""},{type :"FristType",key :"gender",value :""},{type :"FristType",key :"phone",value :""},{type :"FristType",key :"email",value :""},{type :"FristType",key :"company",value :""},{type :"FristType",key :"job",value :""},{type :"FristType",key :"remarks",value :""},';
		            			$.post('<%=path%>/api/ComponentStructure/insert_ComponentStructure',{"controlhierarchystrings":json});
		        	  			window.location.href="${pageContext.request.contextPath}/ui/perInforCon";
		        	  		}
		            	});
            		}else{
            			//校验码失败
            			var error = data.message;
            			$('.s_red_three').text(error);
            			$('#login_code').val("");
            		}
            	},"json");
            	
          		 });
        })
    </script>
    <script type="text/javascript">
		//验证手机号码
		function checkPhone(){
			var reg =/^1(3|4|5|7|8)\d{9}$/;//正则表达式 
			var tel = $('#J-xphone').val();
			if(tel == ''){
				$('.s_red_three').text('手机号不能为空');
				document.getElementById("J-xphone").Value="";
				$('#J-xphone').focus();
				return false;
			}
			//匹配
			var result = reg.test(tel);				
			if(!result){
				//手机号格式不正确，执行下面
				$('.s_red_three').text('不是正确的11位手机号');
				$('#J-xphone').focus();
				return false;
			}else{  
				//手机号格式正确
				$('.s_red_three').text('');
				return true;
			}
		}
		
		function checkCode(){
			/* if(send_times){
				$('.s_red_three').text("请先发送验证码");
				return false;
			} */
			var ver_code = $('#login_code').val();
			if(ver_code != null && ver_code != ''){
				return true;
			}
			$('.s_red_three').text("手机验证码不能为空");
			return false;
		}
		function checkAll(){
			var resultP = checkPhone();
			var resultC = checkCode();
			if(resultP && resultC){
				return true;
			}
			return false;
	    }
	</script>
	<script type="text/javascript">
		var send_times = false;
	</script>
	<script type="text/javascript">
	function delICON(id){
		$(id).val('');
	}
	function showDialog(title){
		$('#dialog_title').html('<img src="${pageContext.request.contextPath}/images/system/s_tick.png"/>'+title+''); 
		$('.s_popup_delect2,.s_consum').show().delay(2000).fadeOut();
	}
	function wait(me){
		console.log("进入wait");
		me.disabled = true;
		window.setTimeout(function(){
				me.disabled = false;
			},2000);
	}
	function toLogin(){
		var phone = $('#J-xphone').val();
		if(phone.length == 11){
			$.cookie('acc',phone);
		}else{
			$.cookie('acc','');
		}
		window.location.href="${pageContext.request.contextPath}/ui/loginPwd";
	}
	$(function(){
		var acp = $.cookie("acc");
		if(acp.length > 0){
			$('#J-xphone').val(acp);
		}
	});
	</script>
</body>
</html>

